<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/font/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/top.css">
    <title>QQ音乐</title>
</head>
<body>
    <!-- 头部 -->
    <header class="header-wrapper w100">
        <div class="header-box w1600">
            <div class="header-nav">
                <div class="logo">
                    <a href="#" class="logo-a">
                        <img src="images/logo.png" class="logo-img">
                    </a>
                </div>
                <nav class="mainnav">
                    <ul class="mainnav-ul">
                        <li class="mainnav-li active">
                            <a href="#" class="mainnav-a">音乐馆</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">我的音乐</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">客户端</a>
                            <img src="images/mark_1.png" alt="" class="mark-img">
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">开放平台</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">VIP</a>
                        </li>
                    </ul>
                </nav>
                <!-- 搜索 -->
                <div class="search">
                    <form action="">
                        <button class="btn-search"></button>
                        <input type="text" name="keywords" id="keywords" placeholder="搜索音乐、MV、歌单、用户" class="search-input" autocomplete="off">
                        <div class="search-wrapper">
                            <div class="search-drop">
                                <ul class="search-drop-ul">
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">1</span>
                                            <p class="search-title">我们的歌我们的歌我们的歌</p>
                                            <span class="count">765.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">2</span>
                                            <p class="search-title">梦华录主题曲</p>
                                            <span class="count">65.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">3</span>
                                            <p class="search-title">爱你——王心凌</p>
                                            <span class="count">165.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">4</span>
                                            <p class="search-title">爱你——王心凌</p>
                                            <span class="count">165.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">5</span>
                                            <p class="search-title">星辰大海</p>
                                            <span class="count">65.6万</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 用户 -->
                <div class="user">
                    <a href="#" class="btn-login">登录</a>
                    <div class="btn btn-vip user-btn">
                        <span class="btn-content">开通VIP</span>
                        <div class="drop-menu">
                            <a href="#" class="drop-menu-a">开通绿钻豪华版</a>
                            <a href="#" class="drop-menu-a">开通付费包</a>
                        </div>
                    </div>
                    <div class="btn btn-money user-btn">
                        <span class="btn-content">充值</span>
                        <div class="drop-menu">
                            <a href="#" class="drop-menu-a">购买乐比</a>
                            <a href="#" class="drop-menu-a">充值饭票</a>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="subnav">
                <ul class="subnav-ul">
                    <li class="subnav-li">
                        <a href="index.html" class="subnav-a">首页</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">歌手</a>
                    </li>
                    <li class="subnav-li ">
                        <a href="#" class="subnav-a">新碟</a>
                    </li>
                    <li class="subnav-li active">
                        <a href="top.html" class="subnav-a">排行榜</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">分类歌单</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">MV</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">电台</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">数字专辑</a>
                    </li>
                    <li class="subnav-li">
                        <a href="ticket.html" class="subnav-a">票务</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- 模块 -->
    <main class="main w100">
        <section class="top w1600">
            <div class="top-container">
                <div class="top-list">
                    <div class="top-list-title">
                        <h1 class="top-list-title-h1">热歌榜</h1>
                        <div class="top-list-date">
                            <button class="top-btn"><i class="iconfont icon-fanhui"></i></button>
                            <span class="top-date">05.06-05.12
                            </span>
                            <button class="top-btn" disabled><i class="iconfont icon-gengduo"></i></button>
                        </div>
                        <a href="#">榜单规则</a>
                    </div>
                    <div class="top-list-menu mb20">
                        <div class="btn-box btn-themebg-box">
                            <a href="#" class="btn-box-a">
                                <i class="iconfont icon-player-play"></i><span class="btn-box-text">播放全部</span></a>
                        </div>
                        <div class="btn-box">
                            <a href="#" class="btn-box-a">
                                <i class="iconfont icon-tianjia"></i><span class="btn-box-text">添加到</span></a>
                        </div>
                        <div class="btn-box">
                            <a href="#" class="btn-box-a">
                                <i class="iconfont icon-icon-test"></i><span class="btn-box-text">下载</span></a>
                        </div>
                        <div class="btn-box">
                            <a href="#" class="btn-box-a">
                                <i class="iconfont icon-write"></i><span class="btn-box-text">批量操作</span></a>
                        </div>
                        <div class="btn-box">
                            <a href="#" class="btn-box-a">
                                <i class="iconfont icon-comment"></i><span class="btn-box-text">评论(124578)</span></a>
                        </div>
                    </div>
                    <div class="top-list-content">
                        <div class="top-list-content-title">
                            <ul class="tlct-ul">
                                <li class="tlct-li">歌曲</li>
                                <li class="tlct-li">歌手</li>
                                <li class="tlct-li">时长</li>
                            </ul>
                        </div>
                        <div class="top-list-content-items">
                            <ul class="tlci-ul">
                                <li class="tlci-li">
                                    <span class="tlci-num">1</span>
                                    <span class="tlci-rank">20%</span>
                                    <div class="tlci-box">
                                        <a href="#" class="tlci-a"><img src="images/upload/top/1.webp" class="tlci-img" title="魔鬼邂逅"></a>
                                        <a href="#" title="魔鬼邂逅" class="tlci-title">魔鬼邂逅魔鬼邂逅魔鬼邂逅魔鬼邂逅魔鬼邂逅魔鬼邂逅魔鬼邂逅</a>
                                        <div class="tlci-dropmenu">
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon1" title="播放"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon2" title="添加到歌单"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon3" title="分享"></a>
                                        </div>
                                    </div>
                                    <a href="#" class="tlci-songer">邓岳章</a>
                                    <span class="tlci-time">04:00</span>
                                </li>
                                <li class="tlci-li">
                                    <span class="tlci-num">2</span>
                                    <span class="tlci-rank">15%</span>
                                    <div class="tlci-box">
                                        <a href="#" class="tlci-a"><img src="images/upload/top/2.webp" class="tlci-img" title="魔鬼邂逅"></a>
                                        <a href="#" title="魔术手魔术手" class="tlci-title">魔术手魔术手</a>
                                        <a href="#" class="mv-tips song-tips"></a>
                                        <i class="vip-tips song-tips"></i>
                                        <div class="tlci-dropmenu">
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon1" title="播放"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon2" title="添加到歌单"></a>
                                        </div>
                                    </div>
                                    <a href="#" class="tlci-songer">邓岳章</a>
                                    <span class="tlci-time">04:00</span>
                                </li>
                                <li class="tlci-li">
                                    <span class="tlci-num">3</span>
                                    <span class="tlci-rank">15%</span>
                                    <div class="tlci-box">
                                        <a href="#" class="tlci-a"><img src="images/upload/top/3.webp" class="tlci-img" title="魔鬼邂逅"></a>
                                        <a href="#" title="魔术手魔术手" class="tlci-title">魔术手魔术手</a>
                                        <a href="#" class="mv-tips song-tips"></a>
                                        <div class="tlci-dropmenu">
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon1" title="播放"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon2" title="添加到歌单"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon3" title="分享"></a>
                                        </div>
                                    </div>
                                    <a href="#" class="tlci-songer">邓岳章</a>
                                    <span class="tlci-time">04:00</span>
                                </li>
                                <li class="tlci-li">
                                    <span class="tlci-num">4</span>
                                    <span class="tlci-rank">15%</span>
                                    <div class="tlci-box">
                                        <a href="#" class="tlci-a"><img src="images/upload/top/4.webp" class="tlci-img" title="魔鬼邂逅"></a>
                                        <a href="#" title="魔术手魔术手" class="tlci-title">魔术手魔术手</a>
                                        <div class="tlci-dropmenu">
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon1" title="播放"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon2" title="添加到歌单"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon3" title="分享"></a>
                                        </div>
                                    </div>
                                    <a href="#" class="tlci-songer">邓岳章</a>
                                    <span class="tlci-time">04:00</span>
                                </li>
                                <li class="tlci-li">
                                    <span class="tlci-num">5</span>
                                    <span class="tlci-rank">20%</span>
                                    <div class="tlci-box">
                                        <a href="#" class="tlci-a"><img src="images/upload/top/5.webp" class="tlci-img" title="魔鬼邂逅"></a>
                                        <a href="#" title="魔鬼邂逅" class="tlci-title">魔鬼邂逅魔鬼邂逅魔鬼邂逅魔鬼邂逅魔鬼邂逅魔鬼邂逅魔鬼邂逅</a>
                                        <div class="tlci-dropmenu">
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon1" title="播放"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon2" title="添加到歌单"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon3" title="分享"></a>
                                        </div>
                                    </div>
                                    <a href="#" class="tlci-songer">邓岳章</a>
                                    <span class="tlci-time">04:00</span>
                                </li>
                                <li class="tlci-li">
                                    <span class="tlci-num">6</span>
                                    <span class="tlci-rank">15%</span>
                                    <div class="tlci-box">
                                        <a href="#" class="tlci-a"><img src="images/upload/top/2.webp" class="tlci-img" title="魔鬼邂逅"></a>
                                        <a href="#" title="魔术手魔术手" class="tlci-title">魔术手魔术手</a>
                                        <a href="#" class="mv-tips song-tips"></a>
                                        <i class="vip-tips song-tips"></i>
                                        <div class="tlci-dropmenu">
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon1" title="播放"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon2" title="添加到歌单"></a>
                                        </div>
                                    </div>
                                    <a href="#" class="tlci-songer">邓岳章</a>
                                    <span class="tlci-time">04:00</span>
                                </li>
                                <li class="tlci-li">
                                    <span class="tlci-num">7</span>
                                    <span class="tlci-rank">15%</span>
                                    <div class="tlci-box">
                                        <a href="#" class="tlci-a"><img src="images/upload/top/3.webp" class="tlci-img" title="魔鬼邂逅"></a>
                                        <a href="#" title="魔术手魔术手" class="tlci-title">魔术手魔术手</a>
                                        <a href="#" class="mv-tips song-tips"></a>
                                        <div class="tlci-dropmenu">
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon1" title="播放"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon2" title="添加到歌单"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon3" title="分享"></a>
                                        </div>
                                    </div>
                                    <a href="#" class="tlci-songer">邓岳章</a>
                                    <span class="tlci-time">04:00</span>
                                </li>
                                <li class="tlci-li">
                                    <span class="tlci-num">8</span>
                                    <span class="tlci-rank">15%</span>
                                    <div class="tlci-box">
                                        <a href="#" class="tlci-a"><img src="images/upload/top/4.webp" class="tlci-img" title="魔鬼邂逅"></a>
                                        <a href="#" title="魔术手魔术手" class="tlci-title">魔术手魔术手</a>
                                        <div class="tlci-dropmenu">
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon1" title="播放"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon2" title="添加到歌单"></a>
                                            <a href="#" class="tlci-dropmenu-icons tlci-dropmenu-icon3" title="分享"></a>
                                        </div>
                                    </div>
                                    <a href="#" class="tlci-songer">邓岳章</a>
                                    <span class="tlci-time">04:00</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="download">
                    <p class="mb20">查看更多内容，请下载客户端</p>
                    <a href="#" class="btn-capsule">立即下载</a>
                </div>
                <div class="comment">
                    <h2 class="comment-h2">评论 <span class="comment-count">共988条评论</span></h2>
                    <div class="comment-inputbox mb20">
                        <form action="">
                            <div class="comment-textarea mb10">
                                <textarea name="comment" id="comment" placeholder="请输入你的想法吧" rows="4" class="comment-input"></textarea>
                                <span class="comment-textcount">剩余<em class="comment-totalnum">300</em>字</span>
                            </div>
                            <div class="comment-submitbox">
                                <i class="comment-emjoy"></i>
                                <input type="submit" value="发表评论" class="btn-submit">
                            </div>
                        </form>
                    </div>
                    <div class="comment-users">
                        <div class="comment-choice">
                            <p class="comment-tagtitle">精彩评论</p>
                            <ul class="comment-lists">
                                <li class="comment-li">
                                    <a href="#" class="user-avtor">
                                        <img src="images/upload/avtor/1.png" class="user-img">
                                    </a>
                                    <div class="comment-content">
                                        <a href="#" class="user-name color999">千层海浪🌊</a>
                                        <p class="comment-publish color999">2019年12月29日 23:26</p>
                                        <p class="comment-text">薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️</p>
                                        <p class="comment-tips">
                                            <span class="isdianzan dianzanbox"><i class="comment-dianzan"></i> <i class="comment-dianzan-num ">589</i></span>
                                            <span><i class="comment-subtext">回复</i></span>
                                            <span><i class="comment-report">举报</i></span>
                                        </p>
                                        <p class="comment-open mb10">查看11条回复 <i class="comment-arrow-bottom is-complete"></i> </p>
                                        <div class="comment-replay-simple none">
                                            <ul class="comment-replay-ul">
                                                <li class="comment-replay-li">
                                                    <a href="#" class="themecolor">鲲:</a>
                                                    <p class="comment-replay-content">电脑真好用，还是在学校呢👀👀👀电脑真好用，还是在学校呢👀👀👀电脑真好用，还是在学校呢👀👀👀电脑真好用，还是在学校呢👀👀👀电脑真好用，还是在学校呢👀👀👀</p>
                                                    <span class="comment-replay-dianzanbox"><i class="comment-dianzan comment-replay-dianzan"></i> <i class="comment-dianzan-num">589</i></span>
                                                </li>
                                                <li class="comment-replay-li">
                                                    <a href="#" class="themecolor">石桂霞：</a>
                                                    <p class="comment-replay-content">牛皮</p>
                                                    <span class="comment-replay-dianzanbox"><i class="comment-dianzan comment-replay-dianzan"></i> <i class="comment-dianzan-num">152</i></span>
                                                </li>
                                                <li class="comment-replay-li">
                                                    <a href="#" class="themecolor">Travis：</a>
                                                    <p class="comment-replay-content">那么多宝干嘛😀</p>
                                                    <span class="comment-replay-dianzanbox"><i class="comment-dianzan comment-replay-dianzan"></i> <i class="comment-dianzan-num">152</i></span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="comment-replay-simple is-complete">
                                            <ul class="comment-replay-ul">
                                                <li class="comment-replay-li">
                                                    <a href="#" class="user-avtor">
                                                        <img src="images/upload/avtor/1.png" class="user-img">
                                                    </a>
                                                    <div class="comment-content">
                                                        <a href="#" class="user-name color999">千层海浪🌊</a>
                                                        <p class="comment-publish color999">2019年12月29日 23:26</p>
                                                        <p class="comment-text">我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️</p>
                                                        <p class="comment-tips">
                                                            <span class="dianzanbox"><i class="comment-dianzan"></i> <i class="comment-dianzan-num ">589</i></span>
                                                            <span><i class="comment-subtext">回复</i></span>
                                                            <span><i class="comment-report">举报</i></span>
                                                        </p>
                                                    </div>
                                                </li>
                                                <li class="comment-replay-li">
                                                    <a href="#" class="user-avtor">
                                                        <img src="images/upload/avtor/2.png" class="user-img">
                                                    </a>
                                                    <div class="comment-content">
                                                        <a href="#" class="user-name color999">千层海浪🌊</a>
                                                        <p class="comment-publish color999">2019年12月29日 23:26</p>
                                                        <p class="comment-text">我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️</p>
                                                        <p class="comment-tips">
                                                            <span class="dianzanbox"><i class="comment-dianzan"></i> <i class="comment-dianzan-num ">589</i></span>
                                                            <span><i class="comment-subtext">回复</i></span>
                                                            <span><i class="comment-report">举报</i></span>
                                                        </p>
                                                    </div>
                                                </li>
                                                <li class="comment-replay-li">
                                                    <a href="#" class="user-avtor">
                                                        <img src="images/upload/avtor/3.jpg" class="user-img">
                                                    </a>
                                                    <div class="comment-content">
                                                        <a href="#" class="user-name color999">千层海浪🌊</a>
                                                        <p class="comment-publish color999">2019年12月29日 23:26</p>
                                                        <p class="comment-text">我还是抵抗不了你的声音❤️</p>
                                                        <p class="comment-tips">
                                                            <span class="dianzanbox"><i class="comment-dianzan"></i> <i class="comment-dianzan-num ">589</i></span>
                                                            <span><i class="comment-subtext">回复</i></span>
                                                            <span><i class="comment-report">举报</i></span>
                                                        </p>
                                                    </div>
                                                </li>
                                                
                                            </ul>
                                        </div>

                                    </div>
                                </li>
                                <li class="comment-li">
                                    <a href="#" class="user-avtor">
                                        <img src="images/upload/avtor/1.png" class="user-img">
                                    </a>
                                    <div class="comment-content">
                                        <a href="#" class="user-name color999">千层海浪🌊</a>
                                        <p class="comment-publish color999">2019年12月29日 23:26</p>
                                        <p class="comment-text">薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️</p>
                                        <p class="comment-tips">
                                            <span class="isdianzan dianzanbox"><i class="comment-dianzan"></i> <i class="comment-dianzan-num ">589</i></span>
                                            <span><i class="comment-subtext">回复</i></span>
                                            <span><i class="comment-report">举报</i></span>
                                        </p>
                                        <p class="comment-open mb10">查看11条回复 <i class="comment-arrow-bottom"></i> </p>
                                        <div class="comment-replay-simple">
                                            <ul class="comment-replay-ul">
                                                <li class="comment-replay-li">
                                                    <a href="#" class="themecolor">鲲:</a>
                                                    <p class="comment-replay-content">电脑真好用，还是在学校呢👀👀👀电脑真好用，还是在学校呢👀👀👀电脑真好用，还是在学校呢👀👀👀电脑真好用，还是在学校呢👀👀👀电脑真好用，还是在学校呢👀👀👀</p>
                                                    <span class="comment-replay-dianzanbox"><i class="comment-dianzan comment-replay-dianzan"></i> <i class="comment-dianzan-num">589</i></span>
                                                </li>
                                                <li class="comment-replay-li">
                                                    <a href="#" class="themecolor">石桂霞：</a>
                                                    <p class="comment-replay-content">牛皮</p>
                                                    <span class="comment-replay-dianzanbox"><i class="comment-dianzan comment-replay-dianzan"></i> <i class="comment-dianzan-num">152</i></span>
                                                </li>
                                                <li class="comment-replay-li">
                                                    <a href="#" class="themecolor">Travis：</a>
                                                    <p class="comment-replay-content">那么多宝干嘛😀</p>
                                                    <span class="comment-replay-dianzanbox"><i class="comment-dianzan comment-replay-dianzan"></i> <i class="comment-dianzan-num">152</i></span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="comment-replay-simple is-complete none">
                                            <ul class="comment-replay-ul">
                                                <li class="comment-replay-li">
                                                    <a href="#" class="user-avtor">
                                                        <img src="images/upload/avtor/1.png" class="user-img">
                                                    </a>
                                                    <div class="comment-content">
                                                        <a href="#" class="user-name color999">千层海浪🌊</a>
                                                        <p class="comment-publish color999">2019年12月29日 23:26</p>
                                                        <p class="comment-text">我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️</p>
                                                        <p class="comment-tips">
                                                            <span class="dianzanbox"><i class="comment-dianzan"></i> <i class="comment-dianzan-num ">589</i></span>
                                                            <span><i class="comment-subtext">回复</i></span>
                                                            <span><i class="comment-report">举报</i></span>
                                                        </p>
                                                    </div>
                                                </li>
                                                <li class="comment-replay-li">
                                                    <a href="#" class="user-avtor">
                                                        <img src="images/upload/avtor/2.png" class="user-img">
                                                    </a>
                                                    <div class="comment-content">
                                                        <a href="#" class="user-name color999">千层海浪🌊</a>
                                                        <p class="comment-publish color999">2019年12月29日 23:26</p>
                                                        <p class="comment-text">我还是抵抗不了你的声音❤️薛之谦，我还是抵抗不了你的声音❤️</p>
                                                        <p class="comment-tips">
                                                            <span class="dianzanbox"><i class="comment-dianzan"></i> <i class="comment-dianzan-num ">589</i></span>
                                                            <span><i class="comment-subtext">回复</i></span>
                                                            <span><i class="comment-report">举报</i></span>
                                                        </p>
                                                    </div>
                                                </li>
                                                <li class="comment-replay-li">
                                                    <a href="#" class="user-avtor">
                                                        <img src="images/upload/avtor/3.jpg" class="user-img">
                                                    </a>
                                                    <div class="comment-content">
                                                        <a href="#" class="user-name color999">千层海浪🌊</a>
                                                        <p class="comment-publish color999">2019年12月29日 23:26</p>
                                                        <p class="comment-text">我还是抵抗不了你的声音❤️</p>
                                                        <p class="comment-tips">
                                                            <span class="dianzanbox"><i class="comment-dianzan"></i> <i class="comment-dianzan-num ">589</i></span>
                                                            <span><i class="comment-subtext">回复</i></span>
                                                            <span><i class="comment-report">举报</i></span>
                                                        </p>
                                                    </div>
                                                </li>
                                                
                                            </ul>
                                        </div>

                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <aside class="top-aside">
                <div class="top-aside-box">
                    <h2 class="top-aside-h2">巅峰榜</h2>
                    <ul class="top-aside-ul">
                        <li class="top-aside-li active">
                            <a href="#" class="top-aside-a">飙升榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">流行指数</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">热歌榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">新歌榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">喜力电音榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">腾讯音乐人原创榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">MV榜单</a>
                        </li>
                    </ul>
                </div>
                <div class="top-aside-box">
                    <h2 class="top-aside-h2">地区榜</h2>
                    <ul class="top-aside-ul">
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">内地榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">香港地区榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">台湾地区榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">新歌榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">喜力电音榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="#" class="top-aside-a">日本榜</a>
                        </li>
                    </ul>
                </div>
            </aside>
        </section>
    </main>

   
    <!-- 尾部 -->
    <footer class="footer w100">
        <div class="footer-wrapper w1600">
            <div class="footer-top">
                <div class="footer-item">
                    <h5 class="footer-title">下载QQ音乐客户端</h5>
                    <ul class="footer-item-ul">
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon0"></div>
                                <span>PC版</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon1"></div>
                                <span>Mac版</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon2"></div>
                                <span>Android版</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon3"></div>
                                <span>iPhone版</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">特色产品</h5>
                    <ul class="footer-item-wrap">
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon4"></div>
                                <span>全民K歌</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon5"></div>
                                <span>银河音效</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon6"></div>
                                <span>QPlay</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon7"></div>
                                <span>Fan直播伴侣</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <span>车载互联</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <span>QQ演出</span>
                            </a>
                        </li>

                        
                    </ul>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">合作链接</h5>
                    <div class="footer-links">
                        <a href="#" class="footer-link">CJ ENM</a>
                        <a href="#" class="footer-link">腾讯视频</a>
                        <a href="#" class="footer-link">手机QQ空间</a>
                        <a href="#" class="footer-link">最新版QQ</a>
                        <a href="#" class="footer-link">腾讯社交广告</a>
                        <a href="#" class="footer-link">电脑管家</a>
                        <a href="#" class="footer-link">CJ ENM</a>
                        <a href="#" class="footer-link">腾讯视频</a>
                        <a href="#" class="footer-link">手机QQ空间</a>
                        <a href="#" class="footer-link">最新版QQ</a>
                        <a href="#" class="footer-link">腾讯社交广告</a>
                        <a href="#" class="footer-link">电脑管家</a>
                        <a href="#" class="footer-link">CJ ENM</a>
                        <a href="#" class="footer-link">腾讯视频</a>
                    </div>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">开放平台</h5>
                    <div class="footer-links">
                        <a href="#" class="footer-link">QQ音乐开放平台</a>
                        <a href="#" class="footer-link">腾讯音乐人</a>
                        <a href="#" class="footer-link">音乐推</a>
                    </div>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">TME集团官网</h5>
                    <div class="footer-links">
                        <a href="#" class="footer-link">腾讯音乐</a>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="footer-copyright-links">
                    <a href="#" class="footer-copyright-a">关于腾讯</a>
                    <a href="#" class="footer-copyright-a">About Tencent</a>
                    <a href="#" class="footer-copyright-a">服务条款</a>
                    <a href="#" class="footer-copyright-a">用户服务协议 </a>
                    <a href="#" class="footer-copyright-a">关于腾讯</a>
                    <a href="#" class="footer-copyright-a">About Tencent</a>
                    <a href="#" class="footer-copyright-a">服务条款</a>
                    <a href="#" class="footer-copyright-a">用户服务协议 </a>
                    <a href="#" class="footer-copyright-a">服务条款</a>
                    <a href="#" class="footer-copyright-a">用户服务协议 </a>
                </div>
                <p class="footer-copyright-text">Copyright © 1998 - 2022 Tencent. <a href="#">All Rights Reserved.</a></p>
                <div class="footer-copyright-links">
                    腾讯公司
                    <a href="#" class="footer-copyright-a">版权所有</a>
                    <a href="#" class="footer-copyright-a">营业执照</a>
                    <span class="footer-copyright-a">网络文化经营许可证：<a href="#">粤网文[2020]3396-195号</a></span>
                    <span class="footer-copyright-a">客服电话：<a href="#">4006016666</a></span>
                </div>
            </div>
        </div>
    </footer>
    <!-- 侧边 -->
    <aside class="aside">
        
        <a href="#" class="aside-box-a">
            <span class="aside-icon back"></span>
        </a>
        <a href="#" class="aside-box-a">
            反馈
        </a>
        <a href="#" class="aside-box-a">
            <span class="aside-icon music"></span>
        </a>
        
    </aside>
</body>
</html>